<template>
  <div class="game">
    <h3>热门游戏推荐</h3>
    <!--
    <ul>
      <li v-for="game in games" :key="game.id">{{ game.name }}</li>
    </ul>
    -->
    <!--传递props-->
    <slot :games="games"></slot>
  </div>
</template>

<script setup lang="ts" name="Game">
import { reactive } from "vue";

let games = reactive([
  {
    id: "abc001",
    name: "王者荣耀",
  },
  {
    id: "abc002",
    name: "原神",
  },
  {
    id: "abc003",
    name: "星穹铁道",
  },
  {
    id: "abc004",
    name: "黑神话悟空",
  },
  {
    id: "abc005",
    name: "第五人格",
  },
  {
    id: "abc006",
    name: "蛋仔派对",
  },
  {
    id: "abc007",
    name: "恋与深空",
  },
  {
    id: "abc008",
    name: "时光中的绘旅人",
  },
]);
</script>

<style scoped>
.game {
  background-color: aquamarine;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  width: 200px;
  height: 300px;
  margin: 10px;
}
</style>
